<template>
  <h3>数组变化侦测</h3>
  <button @click="addListHandler">添加数据</button>
  <ul>
    <li v-for="(item, index) of names" :key="index">{{ item }}</li>
  </ul>
  <button @click="concatHandle">合并数组</button>
  <h3>数组1</h3>
  <p v-for="(item, index) of num1" :key="index">{{ item }}</p>
  <h3>数组2</h3>
  <p v-for="(item, index) of num2" :key="index">{{ item }}</p>
</template>

<script>
export default {
  data() {
    return {
      names:['iwen', 'ime', 'frank'],
      num1:[1,2,3,4,5],
      num2:[6,7,8,9,10]
    }
  },
  methods: {
    addListHandler() {
      // 引起UI自动更新的方法
      // this.names.push("sakura")
      // 不会引起UI自动更新的方法
      this.names.concat(['sakura']);
      console.log(this.names);
    },
    concatHandle() {
      this.num1 = this.num1.concat(this.num2);
    }
  }
}
</script>
